<template>
  <div class="w-1000px m-auto mt-20px mb-10px">
    <Descriptions bordered :column="2" :labelStyle="{ width: '150px', textAlign: 'right' }">
      <template #title>
        <div style="text-align: center"> Java VM （Java虚拟机）内存 </div>
        <div style="width: 300px; margin: 0 auto">
          <Progress
            stroke-linecap="square"
            :percent="Math.ceil((dataRef.usedMemory / dataRef.totalMemory) * 100)"
            stroke-color="#00ff00"
            trail-color="#006600"
            :format="(percent) => `${percent}%`"
            :stroke-width="25"
          />
        </div>
      </template>
      <DescriptionsItem label="已用内存"> {{ dataRef.usedMemory || '' }} MB </DescriptionsItem>
      <DescriptionsItem label="控件上传">
        最大{{ dataRef.maxWebeditFileSize || '' }} M
      </DescriptionsItem>
      <DescriptionsItem label="内存总量"> {{ dataRef.totalMemory || '' }} MB </DescriptionsItem>
      <DescriptionsItem label="单个文件上传"> 最大{{ dataRef.fileSize || '' }} M </DescriptionsItem>
      <DescriptionsItem label="最大内存"> {{ dataRef.maxMemory || '' }} MB </DescriptionsItem>
      <DescriptionsItem label="缓存状态">
        {{ dataRef.canCache ? '启用中' : '停用' }}
        <template v-if="dataRef.canCache">
          <a-button type="link" @click="handleStop">停用</a-button>
          <a-button type="link" @click="handleClear">清除</a-button>
        </template>
        <a-button type="link" @click="handleStart" v-else>启用</a-button>
      </DescriptionsItem>
      <DescriptionsItem label="处理器数"> {{ dataRef.processors || '' }} 个 </DescriptionsItem>
      <DescriptionsItem label="内存垃圾">
        <a-button type="link" @click="handleGc">收集</a-button>
        <a-button type="link" @click="handleSetup">后端配置</a-button>
      </DescriptionsItem>
    </Descriptions>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Descriptions, Progress } from 'ant-design-vue';
  import {
    getAdminEnv,
    getAdminStopCache,
    getAdminClearCache,
    getAdminStartCache,
    getAdminGc,
  } from '/@/api/system/system';
  import { useUserStore } from '/@/store/modules/user';

  const DescriptionsItem = Descriptions.Item;
  import { useMessage } from '/@/hooks/web/useMessage';

  const userStore = useUserStore();
  const serverInfo = userStore.getServerInfo;

  const { createMessage } = useMessage();
  const dataRef = ref<Recordable>({});
  const fetch = async () => {
    dataRef.value = await getAdminEnv();
  };
  onMounted(fetch);
  const handleStop = async () => {
    await getAdminStopCache();
    createMessage.success('操作成功');
    fetch();
  };
  const handleClear = async () => {
    await getAdminClearCache();
    createMessage.success('操作成功');
    fetch();
  };
  const handleStart = async () => {
    await getAdminStartCache();
    createMessage.success('操作成功');
    fetch();
  };
  const handleGc = async () => {
    await getAdminGc();
    createMessage.success('操作成功');
    fetch();
  };

  const handleSetup = async () => {
    const rootPath = serverInfo.rootPath;

    window.open(rootPath + '/setup');
  };
</script>
<style lang="less" scoped>
  :deep(.ant-progress-inner) {
    border-radius: 0;
  }
</style>
